<!DOCTYPE html>
<html lang="cn">
	<head>
		<title>Monitor</title>
		<meta charset="utf-8" />
        <link rel="shortcut icon" href="/assets/media/logos/favicon.ico" />
		<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
		<link href="/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
	</head>

	<body id="kt_app_body" data-kt-app-layout="dark-sidebar" data-kt-app-header-fixed="true" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true" data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">
		<div id="vue_body" class="d-flex flex-column flex-root app-root">
			<div class="app-page flex-column flex-column-fluid" id="kt_app_page">

				<home_header></home_header>
				
				<div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
					
                    <home_sidebar></home_sidebar>

					<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
						<div class="d-flex flex-column flex-column-fluid">
							<!-- ----------------------------------------- -->
                            <!-- ----------------------------------------- -->
                            <!-- ----------------------------------------- -->
                            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
								<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
									<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
										<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">账户设置</h1>
										<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
											<li class="breadcrumb-item text-muted">
												<a href="/index.html" class="text-muted text-hover-primary">主页</a>
											</li>
											<li class="breadcrumb-item">
												<span class="bullet bg-gray-400 w-5px h-2px"></span>
											</li>
											<li class="breadcrumb-item text-muted">账户设置</li>
										</ul>
									</div>
								</div>
							</div>



							<div id="kt_app_content" class="app-content flex-column-fluid">
								<!--begin::Content container-->
								<div id="kt_app_content_container" class="app-container container-xxl">
									<!--begin::Navbar-->
									<div class="card mb-5 mb-xl-10">
										<div class="card-body pt-9 pb-0">
											<div class="d-flex flex-wrap flex-sm-nowrap mb-3">

												<div class="me-7 mb-4">
													<div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
														<image :src='"https://ui-avatars.com/api/?name=" + people.name+ "&background=0081ff&color=ffffff&rounded=false"' ></image>
													</div>
												</div>

												<div class="flex-grow-1">
													<div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
														<div class="d-flex flex-column">
															<div class="d-flex align-items-center mb-2">
																<a href="#" class="text-gray-900 text-hover-primary fs-2 fw-bold me-1">{{people.name}}</a>
																<a href="#"><span class="svg-icon svg-icon-1 svg-icon-primary">	<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">		<path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="currentColor" />		<path d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white" />	</svg></span></a>
															</div>
															<div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
																<a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
																	<span class="svg-icon svg-icon-4 me-1"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">	<path opacity="0.3" d="M16.5 9C16.5 13.125 13.125 16.5 9 16.5C4.875 16.5 1.5 13.125 1.5 9C1.5 4.875 4.875 1.5 9 1.5C13.125 1.5 16.5 4.875 16.5 9Z" fill="currentColor" />	<path d="M9 16.5C10.95 16.5 12.75 15.75 14.025 14.55C13.425 12.675 11.4 11.25 9 11.25C6.6 11.25 4.57499 12.675 3.97499 14.55C5.24999 15.75 7.05 16.5 9 16.5Z" fill="currentColor" />	<rect x="7" y="6" width="4" height="4" rx="2" fill="currentColor" /></svg></span>
																	运维人员
																</a>
															</div>
														</div>
													</div>

													<div class="d-flex flex-wrap flex-stack">
														<div class="d-flex flex-column flex-grow-1 pe-8">
															<div class="d-flex flex-wrap">
																<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
																	<div class="d-flex align-items-center">
																		<span class="svg-icon svg-icon-3 svg-icon-success me-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">	<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor" />	<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor" /></svg></span>
																		<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="20" data-kt-countup-prefix="">0</div>
																	</div>
																	<div class="fw-semibold fs-6 text-gray-400">处理数</div>
																</div>

																<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
																	<div class="d-flex align-items-center">
																		<span class="svg-icon svg-icon-3 svg-icon-danger me-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">	<rect opacity="0.5" x="11" y="18" width="13" height="2" rx="1" transform="rotate(-90 11 18)" fill="currentColor" />	<path d="M11.4343 15.4343L7.25 11.25C6.83579 10.8358 6.16421 10.8358 5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75L11.2929 18.2929C11.6834 18.6834 12.3166 18.6834 12.7071 18.2929L18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25C17.8358 10.8358 17.1642 10.8358 16.75 11.25L12.5657 15.4343C12.2533 15.7467 11.7467 15.7467 11.4343 15.4343Z" fill="currentColor" /></svg></span>
																		<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="75">0</div>
																	</div>
																	<div class="fw-semibold fs-6 text-gray-400">报警数</div>
																</div>

																<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
																	<div class="d-flex align-items-center">
																		<span class="svg-icon svg-icon-3 svg-icon-success me-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">	<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor" />	<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor" /></svg></span>
																		<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="15" data-kt-countup-prefix="">0</div>
																	</div>
																	<div class="fw-semibold fs-6 text-gray-400">巡检数</div>
																</div>

															</div>
														</div>

														<div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
															<div class="d-flex justify-content-between w-100 mt-auto mb-2">
																<span class="fw-semibold fs-6 text-gray-400">个人信息完成度</span>
																<span class="fw-bold fs-6">100%</span>
															</div>
															<div class="h-5px mx-3 w-100 bg-light mb-3">
																<div class="bg-success rounded h-5px" role="progressbar" style="width: 100%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
															</div>
														</div>

													</div>
												</div>
											</div>

											<ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
												<li class="nav-item mt-2">
													<a class="nav-link text-active-primary ms-0 me-10 py-5" href="/person_module/account.html">个人主页</a>
												</li>

												<li class="nav-item mt-2">
													<a class="nav-link text-active-primary ms-0 me-10 py-5 active" href="/person_module/setting.html">账户设置</a>
												</li>
											</ul>
										</div>
									</div>




									<div class="card mb-5 mb-xl-10">
										<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
											<div class="card-title m-0">
												<h3 class="fw-bold m-0">个人信息</h3>
											</div>
										</div>

										<div id="kt_account_settings_profile_details" class="collapse show">
											<form id="kt_account_profile_details_form" class="form">
												<div class="card-body border-top p-9">

													<div class="row mb-6">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">姓名</label>
														<div class="col-lg-8 fv-row">
															<input type="text" disabled class="form-control form-control-lg form-control-solid" v-model="people.name" />
														</div>
													</div>

													<div class="row mb-6">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">电话</label>
														<div class="col-lg-8 fv-row">
															<input type="text" disabled class="form-control form-control-lg form-control-solid" v-model="people.phone"/>
														</div>
													</div>

													<div class="row mb-6">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">邮件</label>
														<div class="col-lg-8 fv-row">
															<input type="text" disabled class="form-control form-control-lg form-control-solid" v-model="people.email" />
														</div>
													</div>

													<div class="row mb-6">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">职级</label>
														<div class="col-lg-8 fv-row">
															<input type="text" disabled class="form-control form-control-lg form-control-solid" v-model="people.role" />
														</div>
													</div>

													<div class="row mb-6">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">性别</label>
														<div class="col-lg-8 fv-row">
															<input type="text" class="form-control form-control-lg form-control-solid" v-model="people.sex" />
														</div>
													</div>

													<div class="row mb-6">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">生日</label>
														<div class="col-lg-8 fv-row">
															<input type="text" class="form-control form-control-lg form-control-solid" v-model="people.birthday" />
														</div>
													</div>
													
												</div>
	
												<div class="card-footer d-flex justify-content-end py-6 px-9">
													<!-- <button type="reset" class="btn btn-light btn-active-light-primary me-2">取消</button> -->
													<button type="button" class="btn btn-primary" @click="updatePeople()">提交</button>
												</div>
											</form>
										</div>
									</div>

									<div class="card mb-5 mb-xl-10">
										<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_signin_method">
											<div class="card-title m-0">
												<h3 class="fw-bold m-0">登录模块</h3>
											</div>
										</div>

										<div id="kt_account_settings_signin_method" class="collapse show">
											<div class="card-body border-top p-9">
												<div class="d-flex flex-wrap align-items-center mb-10">
													<div id="kt_signin_password">
														<div class="fs-6 fw-bold mb-1">密码</div>
														<div class="fw-semibold text-gray-600">************</div>
													</div>

													<div id="kt_signin_password_button" class="ms-auto">
														<button class="btn btn-light btn-active-light-primary" disabled>修改密码</button>
													</div>
												</div>

												<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed mb-9 p-6">
													<span class="svg-icon svg-icon-2tx svg-icon-primary me-4"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">	<path opacity="0.3" d="M22 19V17C22 16.4 21.6 16 21 16H8V3C8 2.4 7.6 2 7 2H5C4.4 2 4 2.4 4 3V19C4 19.6 4.4 20 5 20H21C21.6 20 22 19.6 22 19Z" fill="currentColor" />	<path d="M20 5V21C20 21.6 19.6 22 19 22H17C16.4 22 16 21.6 16 21V8H8V4H19C19.6 4 20 4.4 20 5ZM3 8H4V4H3C2.4 4 2 4.4 2 5V7C2 7.6 2.4 8 3 8Z" fill="currentColor" /></svg></span>
													<div class="d-flex flex-stack flex-grow-1">
														<div class="fw-semibold">
															<div class="fs-6 text-gray-700">请在登录页面的忘记密码模块进行更改</div>
														</div>
													</div>
												</div>

												<div class="py-2">
													<div class="d-flex flex-stack">
														<div class="d-flex">
															<img src="/assets/media/svg/brand-logos/qq.svg" class="w-30px me-6" alt="" />
															<div class="d-flex flex-column">
																<a href="#" class="fs-5 text-dark text-hover-primary fw-bold">QQ</a>
																<div class="fs-6 fw-semibold text-gray-400">QQ第三方登录</div>
															</div>
														</div>
														<div class="d-flex justify-content-end">
															<div class="form-check form-check-solid form-check-custom form-switch">
																<input class="form-check-input w-45px h-30px" type="checkbox" disabled :checked="people.qq.length > 0" />
															</div>
														</div>
													</div>

													<div class="separator separator-dashed my-5"></div>
													
													<div class="d-flex flex-stack">
														<div class="d-flex">
															<img src="/assets/media/svg/brand-logos/dingding.svg" class="w-30px me-6" alt="" />
															<div class="d-flex flex-column">
																<a href="#" class="fs-5 text-dark text-hover-primary fw-bold">钉钉</a>
																<div class="fs-6 fw-semibold text-gray-400">钉钉第三方登录</div>
															</div>
														</div>
														<div class="d-flex justify-content-end">
															<div class="form-check form-check-solid form-check-custom form-switch">
																<input class="form-check-input w-45px h-30px" type="checkbox" disabled :checked="people.dingDing.length > 0" />
															</div>
														</div>
													</div>
												</div>

											</div>
										</div>
									</div>
								</div>
							</div>


                            <!-- ----------------------------------------- -->
                            <!-- ----------------------------------------- -->
                            <!-- ----------------------------------------- -->
						</div>

						<home_footer></home_footer>

					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

    <script src="/assets/plugins/global/plugins.bundle.js"></script>
	<script src="/assets/js/scripts.bundle.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
	<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>

	<script>
		new Vue({
        	el: "#vue_body",
			components: {
                "home_sidebar": httpVueLoader("/plug_in/home_sidebar.vue"),
				"home_footer": httpVueLoader("/plug_in/home_footer.vue"),
				"home_header": httpVueLoader("/plug_in/home_header.vue"),
            },
        	data: {
				people: {
					name: localStorage.getItem("nameForUser"),
					phone: "123456789",
					email: "",
					role: "",
					birthday: "12",
					sex: "",
					qq: "",  // 开头不能大写，否则会报错
					dingDing: ""
				}
            	
        	},
			methods: {
				// 获得账户信息
                getPerson() {
					axios({
                		method: "post",
                		headers: {
							"Content-Type": "application/json;charset=UTF-8"
                		},
						withCredentials: true,
                		url: "http://127.0.0.1:8088/person/getPerson",
						data: JSON.stringify({"name": localStorage.getItem("nameForUser")}),
            		})
					.then(resp => {
						console.log(resp.data.data);
						this.people = resp.data.data;
						console.log(this.people.phone);
                	})
                	.catch(err => {
                    	console.log(err);
                	})
				},

				// 更改个人信息
				updatePeople() {
					axios({
                		method: "post",
                		headers: {
							"Content-Type": "application/json;charset=UTF-8"
                		},
						withCredentials: true,
                		url: "http://127.0.0.1:8088/person/updatePerson",
						data: JSON.stringify(this.people),
            		})
					.then(resp => {
						location.reload();
                	})
                	.catch(err => {
                    	console.log(err);
                	})

				}
                
            },
            mounted() {
				this.getPerson();
            },




   		})
           
        
       
	</script>
</html>




